<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>口袋鼠后台管理系统</title>
    <meta name="keywords" content="口袋鼠后台管理系统">
    <meta name="description" content="口袋鼠后台管理系统">
    <link rel="shortcut icon" href="/favicon.ico">

    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>

    <style type="text/css">
        .help-block{text-align: left;}
    </style>

</head>
<body class="gray-bg">

<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div>
        <div>
            <h1 class="logo-name"><img src="/img/logo.png" /></h1>
        </div>
        <h3>欢迎使用口袋鼠后台</h3>
        <form role="form" class="form-horizontal login-form" id="commentForm" >
            <div class="form-group ">
                <input id="mobile" name="mobile" class="form-control usernameshow" type="text" aria-required="true" aria-invalid="true" class="error" placeholder=" 登录帐号">
            </div>
            <div class="form-group">
                <input id="password" name="password" class="form-control passwordshow" type="password" placeholder=" 登录密码">
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">登 录</button>
        </form>

    </div>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

<!-- jQuery Validation plugin javascript-->
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/plugins/validate/messages_zh.min.js"></script>
<!--表单验证
<script src="js/demo/form-validate-demo.min.js"></script>-->

<script type="text/javascript">
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        success: function (element) {
            element.closest('.form-group').removeClass('has-error').addClass('has-success');
        },
        errorElement: "span",
        errorPlacement: function (error, element) {
            if (element.is(":radio") || element.is(":checkbox")) {
                error.appendTo(element.parent().parent().parent());
            } else {
                error.appendTo(element.parent());
            }
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    });
    $().ready(function () {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#commentForm").validate({
            rules: {
                mobile: "required",
                password: "required"
            },
            messages: {
                mobile: icon + "请输入登录帐号",
                password: icon + "请输入密码"
            },
            submitHandler:function(){
                $.ajax({
                    type        :    'post',
                    url         :    "login",
                    dataType    :    'json',
                    async       :    false,
                    cache       :    false,
                    processData :    false,  // 告诉jQuery不要去处理发送的数据
                    contentType :    false,  // 告诉jQuery不要去设置Content-Type请求头
                    data        :    new FormData($(".login-form")[0]),
                    success     :    function(msg){
                        if (msg.code!= 20000) {
                            alert(msg.message);
                        }else{
                            window.location.href='<?= yii\helpers\Url::to(['/site/demo'])?>';
                        }
                    }
                });
            }
        });
    });
    $(document).ready(function(){
        $(".usernameshow").mouseup(function(){
            $(".show").html('');
        })
        $(".passwordshow").mouseup(function(){
            $(".show").html('');
        })
    })
</script>
</body>
</html>


